<template>
  <div class="container" id="roomDetail" ref="roomDetail" v-if="showDoc">
    <!-- <van-nav-bar :title="meetTitle" left-arrow fixed  @click-left="onClickLeft"></van-nav-bar> -->
    <div class="nav-container" >
      <div class="content" >
        <div class="panel">
          <div class="panel-mask"></div>
          <div class="panel-content">
            <div class="circle-img">
              <span :class="useable?'circle-font':'circle-font-unuse'">{{useable?'可用':'不可用'}}</span>
              <template v-if="useable">
                <img class="circle" src="../../assets/meeting/circle2.png">
              </template>
              <template v-else>
                <img class="circle" src="../../assets/meeting/circleRed2.png">
              </template>
            </div>
            <p class="meet-title">{{room.oname}}</p>
            <p class="meet-facility"><img class="little" src="../../assets/meeting/people.png">{{room.number}}人</p>
            <p class="meet-facility"><img class="little" src="../../assets/meeting/tv.png" />
              <span class="margin-l-10" v-for="(fac,i) in room.facilities" :key="i" v-if="i<5">
                {{fac}}
              </span>
              <span v-if="room.facilities.length >= 6">......</span>
            </p>
          </div>
        </div>
        <template v-if="useable">
        <div class="padding-b-60">
          <van-cell-group class="cell-group">
            <van-cell title="预约日期" :value="$common.formatTime(orderDate,'Y-M-D')" is-link @click="datePopup"/>
            <van-cell title="预约时间" :value="startTime+'-'+endTime" is-link @click="timePopup"/>
          </van-cell-group>
          <van-cell-group class="cell-group">
            <van-field
              v-model="titleName"
              required
              label="会议名称"
              :maxlength="20"
              input-align="right"
              placeholder="会议名称（最多20字）"
            />
            <van-cell title="会议类别" is-link :value="radioValue==''?'请选择':radioValue" 
            @click="goType" :value-class="radioValue==''?'color-grey':''"/>
            <van-cell title="会议记录" is-link :value="recorduser==''?'请选择':recorduser" 
            @click="goTree(1)" :value-class="recorduser==''?'color-grey':''"/>
            <van-cell title="会议审批" is-link :value="staffuser==''?'请选择':staffuser" 
            @click="goTree(2)" :value-class="staffuser==''?'color-grey':''"/>
          </van-cell-group>
          <van-cell-group class="cell-group">
            <van-field
              v-model="persons"
              required
              clearable
              :border="false"
              disabled
            >
              <div slot="label">出席人员 
                <template v-if="attendanceValue.length > 0">
                  <span class="label-right">{{attendanceValue.length}}人</span>
                </template>
              </div>
              <template v-if="attendanceValue.length > 0">
                <span slot="button" class="more-btn" @click="checkAll">查看全部</span>
              </template>
            </van-field>
            <div class="tag-class">
              <van-row gutter="12">
                <van-col span="4" v-for="(atten, attenIndex) in attendanceValue"
                :key="attenIndex" v-if="attenIndex < 5">
                <template v-if="atten.pic == null">
                  <img class="tag-img" src="../../assets/notification/head.png">
                </template>
                <template v-else>
                  <img class="tag-img" :src="`${$common.filePath}${atten.pic}`">
                </template>
                  <van-icon class="delete-icon" name="clear" color="#F54B03" size="18px" @click="deleteIcon(atten,attenIndex)"/>
                  <p class="tag-text  van-ellipsis">
                    {{atten.name}}
                  </p>
                </van-col>
                <van-col>
                  <div class="add-btn" @click="addAttendance">+</div>
                </van-col>
              </van-row>
              
            </div>
          </van-cell-group>
          <!-- <van-cell-group class="cell-group">
            <van-cell title="会议备注"/>
            <div class="editor-class" id="editor"></div>
          </van-cell-group> -->
          <van-cell-group class="cell-group">
            <van-field
              class="textarea-field"
              :autosize="{'maxHeight': 100, 'minHeight': '50'}"
              v-model="remark"
              rows="3"
              label="会议议程"
              type="textarea"
              placeholder="请输入内容"
            />
          </van-cell-group>
          <van-cell-group class="cell-group file-attachment-class">
            <van-field
              class="textarea-field margin-b-10"
              label-class="field-left-class"
              rows="1"
              disabled
              autosize
              label="会议附件"
              type="textarea"
            >
              <template slot="input">
                <div class="file-class" v-for="(file, fileIndex) in attachment" :key="fileIndex+'new'" @click="previewFile(file)">
                  <img class="img-class" :src="$common.fileIcon(fileName(file, 'type'))">
                  <p class="van-ellipsis name-width">{{ fileName(file, 'fullName') }}</p>
                  <van-icon class="margin-l-20" name="clear" @click.stop="deleteFile(fileIndex,file,attachment)"/>
                </div>
                <van-uploader :after-read="(file) => afterRead(file, 'file', attachment)" 
                  accept="*" />
              </template>
            </van-field>
          </van-cell-group>
          <van-row type="flex" justify="center" class="row-btn">
            <van-col span="12" v-if="type == 'edit'" >
              <van-button type="default" color="#CACACA" size="large" @click="cancelBtn">取消</van-button>
            </van-col>
            <van-col :span="type == 'add'?'24':'12'" :offset="type == 'add'?'':'1'">
              <van-button :class="type == 'add'?'flex-btn':''" type="info" size="large" @click="orderBtn">确认并发送</van-button>
            </van-col>
          </van-row>
        </div>
        </template>
        <!-- ‘不可用’的页面 -->
        <template v-else>
          <van-cell-group class="cell-group">
            <van-cell title="预约日期" :value="$common.formatTime(orderDate,'Y-M-D')" 
            is-link title-class="lefts" @click="datePopup" />
            <van-cell title="预约时间" :value="startTime +'-'+ endTime" is-link title-class="lefts" @click="timePopup"/>
          </van-cell-group>
          <p class="notify-text">该时段已被其他同事预约</p>
          <van-cell-group class="unuse-info" v-for="(item,m) in meetingData" :key="m">
            <div class="unuse-container">
              <template v-if="item.pic == null">
                <img class="head-img" src="../../assets/notification/head.png">
              </template>
              <template v-else>
                <img class="head-img" :src="`${$common.filePath}${item.pic}`">
              </template>
              <span class="unuse-name">{{item.name}}</span>
              <span class="unuse-depart">{{!item.department?'':item.department}}</span>
            </div>
            <div class="unuse-time">会议时间：{{item.year}} {{item.startdate}} - {{item.enddate}}</div>
            <div class="unuse-time">预约时间：{{item.date}}</div>
          </van-cell-group>
        </template>
      </div>
    </div>

    <!-- 日期下拉框 -->
    <van-popup v-model="dateShow" position="bottom" :close-on-click-overlay="false"
    :safe-area-inset-bottom="true">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        @confirm="dateConfirm"
        @cancel="dateCancel"
      />
    </van-popup>
    <!-- 时间选择组件 -->
    <time-choose
      :start="startTime"
      :end="endTime"
       height="300px"
      :show.sync="datePickerVisible"
      @change="timeChange">
      <div></div>
      <div v-if="meetingData.length > 0" slot="header" class="slot-time-panel">
        <ul class="ul-class">
          <li v-for="(order,j) in meetingData" :key="j">
            <span>{{order.startdate}}-{{order.enddate}} {{order.department}}{{order.name}}已预约</span>
          </li>
        </ul>
      </div>
    </time-choose>
    <!-- 类型选择器 -->
    <van-popup v-model="showType" position="bottom" :close-on-click-overlay="false"
    :safe-area-inset-bottom="true">
      <div class="full-container">
        <van-nav-bar class="fixed" title="会议类别" left-text="取消" right-text="完成" 
        @click-left="typeBack" @click-right="showType = false"></van-nav-bar>
        <div class="padding-t-47">
          <van-radio-group  v-model="radioId" v-for="(item,t) in typeData" 
          :key="t" @change="radioChoose">
            <van-radio :name="item.oid">{{item.oname}}</van-radio>
          </van-radio-group>
        </div>
      </div>
    </van-popup>
    <!-- 会议记录选择器 单选人员选择组件 -->
    <van-popup v-model="showRecord" position="bottom" :close-on-click-overlay="false"
    :safe-area-inset-bottom="true">
      <choose-people
        v-if="showRecord"
        :items="items"
        ref="choosePeople" 
        :checked.sync="recordId" 
        :isName="false"
        leftTitle="记录人员"
      />
      <div class="bottom-btn">
        <van-row type="flex" justify="space-between">
          <van-col span="7">
            <van-button type="default" class="default-btn-class" size="large" 
            @click="showRecord = false">取 消</van-button>
          </van-col>
          <van-col span="16">
            <van-button type="info" calss="info-btn-class" size="large" 
            @click="singleConfirmChose">确 定</van-button>
          </van-col>
        </van-row>
      </div>
    </van-popup>
    
    <!-- 会议审批选择器 -->
    <van-popup v-model="showExamine" position="bottom" :close-on-click-overlay="false"
    :safe-area-inset-bottom="true">
      <choose-people
        :items="items"
        ref="choosePeople" 
        :checked.sync="staffId" 
        :isName="false"
        leftTitle="审批人员"
      />
      <div class="bottom-btn">
        <van-row type="flex" justify="space-between">
          <van-col span="7">
            <van-button type="default" class="default-btn-class" size="large" 
            @click="showExamine = false">取 消</van-button>
          </van-col>
          <van-col span="16">
            <van-button type="info" calss="info-btn-class" size="large" 
            @click="examineChoose">确 定</van-button>
          </van-col>
        </van-row>
      </div>
    </van-popup>
    <!-- 出席人员选择器 -->
    <van-popup v-model="showAttendance" position="bottom" :close-on-click-overlay="false"
    :safe-area-inset-bottom="true" >
      <side-choose v-if="showAttendance" ref="sideChoose" :items="items" :default.sync="attendanceId"  titleText="选择出席人员" maxHeight="62vh" 
      @changed="onlineChanged"></side-choose>
      <div class="bottom-btn">
        <van-row type="flex" justify="space-between">
          <van-col span="5">
            <div class="default-class" @click="showAttendance = false">取 消</div>
          </van-col>
          <van-col span="18">
            <div class="info-class" @click="confirmChose">
              <span v-if="changeTemp.length <= 0">确 定</span>
              <span v-if="changeTemp.length > 0">已选</span>
              <p v-if="changeTemp.length > 0" class="span-calss van-ellipsis">
                <span v-for="(temp, index) in changeTemp" :key="index">
                  {{temp.name}}、
                </span>
              </p>
              <span v-if="changeTemp.length > 0">等{{changeTemp.length}}人 确定</span>
            </div>
          </van-col>
        </van-row>
      </div>
    </van-popup>
    <!-- 预约成功弹框 -->
    <van-dialog
     class="order-success"
      v-model="showOrderContainer"
      @confirm="orderBtnConfirm"
    >
      <img class="order-img" src="../../assets/meeting/orderSuccess.png">
      <h2 class="order-title">预约成功</h2>
      <van-cell title="会议室：" :value="orderForm.room" :border="false" title-class="order-left" value-class="order-content van-ellipsis"/>
      <van-cell title="会议主题：" :value="orderForm.title" :border="false" title-class="order-left" value-class="order-content van-ellipsis"/>
      <van-cell title="预约时间：" :value="orderForm.time" :border="false" title-class="order-left" value-class="order-content van-ellipsis"/>
      <template v-if="orderForm.persons.length > 1">
        <van-cell title="出席人员：" :value="orderForm.persons[0] + '/' + orderForm.persons[1] + '等' + orderForm.persons.length + '人'" :border="false" title-class="order-left" value-class="order-content van-ellipsis"/>
      </template>
      <template v-if="orderForm.persons.length <= 1 && orderForm.persons.length > 0">
        <van-cell title="出席人员：" :value="orderForm.persons[0] + orderForm.persons.length + '人'" :border="false" title-class="order-left" value-class="order-content van-ellipsis"/>
      </template>
    </van-dialog>
    <!-- 所有参会人员 -->
    <van-popup v-model="showAll" position="bottom" :close-on-click-overlay="false"
    :safe-area-inset-bottom="true" :style="{height: '100vh'}">
      <div class="full-container">
        <!-- <van-nav-bar title="出席人员" right-text="继续添加" left-text="返回" left-arrow  
        @click-left="goBack" @click-right="attentToAdd"></van-nav-bar> -->
        <div class="alls">
          <p class="information">共{{attendanceValue.length}}人参会</p>
          <van-cell-group :border="false" v-for="(item,i) in attendanceValue" :key="i">
            <van-cell>
              <template slot="title">
                <div class="flex-base">
                  <template v-if="item.pic == null">
                    <img class="tag-img" src="../../assets/notification/head.png">
                  </template>
                  <template v-else>
                    <img class="tag-img" :src="`${$common.filePath}${item.pic}`">
                  </template>
                  <van-icon class="pop_delete-icon" name="clear" color="#F54B03" size="18px" @click.stop="deleteIcon(item,i)"/>
                  <span class="title-text ">
                    {{item.name}}
                  </span>
                </div>
              </template>
              <template slot="default">
                <div class="right-value">
                  <!-- <a><img class="custom-class" src="../../assets/meeting/message.png"></a> -->
                  <template v-if="item.phone != null">
                    <img class="custom-class" src="../../assets/meeting/tel.png" @click="phoneCall(item.phone)">
                  </template>
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script type="text/javascript">
  import timeChoose from '@/components/TimeChoose.vue'
  import choosePeople from '@/components/ChoosePeople.vue'
  import sideChoose from '@/components/SideChoose.vue'
  export default{
    components: {
      'time-choose': timeChoose,
      'choose-people': choosePeople,
      'side-choose': sideChoose
    },
    data(){
      return{
        type:"add",//页面当前状态是edit or add
        oid: null,//会议室ID（add） or 会议id (edit)
        useable: true,//该会议室是 可用 还是 不可用
        showDoc: false,  //页面显示
        meetTitle:'会议管理',
        room: {
          oid:'',
          oname:'',
          number:'',
          facilities:[]
        },//会议室
        meetingData:[],//已预约会议室的数据
        typeData:[],//类型数据
        titleName: "",
        remark: "",
        persons: "",//出席人员
        orderDate: new Date(),
        dateShow: false,
        currentDate: new Date(),
        minDate: new Date(),
        datePickerVisible: false,
        startTime: '',
        endTime: '',

        showType: false,
        radioValue: '',//类别名字
        radioId: null,//类别ID

        showRecord: false,
        showExamine: false,
        items:[],//树结构数据
        recordIndex: 0,
        examineIndex: 0,
        recordId: "0",//记录id
        recorduser: '',//记录人名字
        staffId: "0",//审批id
        staffuser: '',//审批人名字

        showAttendance: false,
        attendanceId: [],//出席人员ID数组
        attendanceIndex: 0,
        attendanceValue: [],//出席人员数组
        changeTemp:[],//复选框临时数组
        showAll:false,

        showOrderContainer: false,//预约按钮控制器
        //预约数据表单
        orderForm:{
          room:"",
          title:"",
          time:"",
          persons:[]
        },
        attachment: [],   //会议附件
      }
    },
    activated() {
      this.type = "add",//页面当前状态是edit or add
      this.oid = null,//会议室ID（add） or 会议id (edit)
      this.useable = true,//该会议室是 可用 还是 不可用
      this.meetTitle = '会议管理',
      this.showDoc = false
      this.room = {
        oid:'',
        oname:'',
        number:'',
        facilities:[]
      },//会议室
      this.meetingData = [],//已预约会议室的数据
      this.typeData = [],//类型数据
      this.titleName = "",
      this.remark = "",
      this.persons = "",//出席人员
      this.orderDate = new Date(),
      this.dateShow = false,
      this.currentDate = new Date(),
      this.minDate = new Date(),
      this.datePickerVisible = false,
      this.startTime = '',
      this.endTime = '',

      this.showType = false,
      this.radioValue = '',//类别名字
      this.radioId = null,//类别ID

      this.showRecord = false,
      this.showExamine = false,
      this.items = [],//树结构数据
      this.recordIndex = 0,
      this.examineIndex = 0,
      this.recordId = "0",//记录id
      this.recorduser = '',//记录人名字
      this.staffId = "0",//审批id
      this.staffuser = '',//审批人名字

      this.showAttendance = false,
      this.attendanceId = [],//出席人员ID数组
      this.attendanceIndex = 0,
      this.attendanceValue = [],//出席人员数组
      this.showAll = false,

      this.showOrderContainer = false,//预约按钮控制器
      //预约数据表单
      this.orderForm = {
        room:"",
        title:"",
        time:"",
        persons:[]
      };
      this.attachment = [];   //会议附件
      //显示默认当前时间往后10分钟，半个小时的时间段
      let numStart = this.$common.timeToSec(this.$route.query.start) + 10*60
      let numEnd = numStart + 30*60
      this.startTime = this.$common.secToTime(numStart)
      this.endTime = this.$common.secToTime(numEnd)

      this.$bridge.callHandler('navBack')
      this.$bridge.callHandler('navTitle', {title: '会议室详情'})
      this.oid = this.$route.query.id
      this.useable = this.$route.query.useable
      this.orderDate = this.$route.query.date
      this.type = this.$route.query.type
      this.showRoom()
      this.treeList()
      // this.editors()
      if(this.type == 'edit'){
        this.editInfo()
        this.startTime = this.$route.query.start
        this.endTime = this.$route.query.end
        this.meetTitle = "会议编辑"
      }
      /*console.log(this.$refs)
      this.$refs.roomDetail.scrollTo(0,0)*/

    },
    watch: {
      // 类型选择器
      'showType': {
        handler(newV, oldV) {
          if (this.showType) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('cancelNavKeepView')
          }
        }
      },
      // 记录人员选择器
      'showRecord': {
        handler(newV, oldV) {
          if (this.showRecord) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('cancelNavKeepView')
          }
        }
      },
      // 审批人员选择器
      'showExamine': {
        handler(newV, oldV) {
          if (this.showExamine) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('cancelNavKeepView')
          }
        }
      },
      // 出席人员选择器
      'showAttendance': {
        handler(newV, oldV) {
          if (this.showAttendance) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('cancelNavKeepView')
          }
        }
      },
      // 日期选择器
      'dateShow': {
        handler(newV, oldV) {
          if (this.dateShow) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('cancelNavKeepView')
          }
        }
      },
      // 时间选择器
      'datePickerVisible': {
        handler(newV, oldV) {
          if (this.datePickerVisible) {
            this.$bridge.callHandler('navKeepView')
          } else {
            this.$bridge.callHandler('cancelNavKeepView')
          }
        }
      }
    },
    methods: {
      fileName(url, type) {
        let fullName   = !url.split('@daxsdfcsgr6time666@')[1] ? url : url.split('@daxsdfcsgr6time666@')[1]
        let pointCount = fullName.split('.').length
        let fileType   = fullName.split('.')[pointCount - 1]
        switch(type){
          case 'name':
            return fullName.split('.', pointCount - 1).join('.');
          case 'type':
            return fileType;
          case 'fullName':
          default:
            return fullName;
        }
      },
       /**
       * 成功读取文件后 上传
       * @param  {[type]} file     [description]
       * @param  {[type]} formItem [description]
       * @return {[type]}          [description]
       */
      afterRead(file, type, formItem) {
        let self = this
        self.$bridge.callHandler('navKeepView')
        let formData = new FormData()
        formData.append('file', file.file)
        formData.append('do', 'file')
        this.$toast({
          message: '上传中...',
          duration: 0,
          overlay: true,
          forbidClick: true,
          className: 'loading-toast',
          icon: require('../../assets/loading.gif'),
        })
        let config = {
          headers: { //添加请求头
            'Content-Type': 'multipart/form-data'
          },
          url: `${this.$common.basePath}login.php`,
          data: formData,
          method: 'POST'
        }
        this.$axios(config).then(res => {
          self.$bridge.callHandler('cancelNavKeepView')
          formItem.push(res.data.url)
          this.$nextTick(_ => {
            this.$toast.clear()
          })
        }).catch(err => {
          // console.log(err)
          self.$bridge.callHandler('cancelNavKeepView')
          this.$toast({
            icon: 'cross',
            message: err.msg ? err.msg : '上传失败!'
          })
        })
      },
      /**
       * 附件删除
       * @return {[type]} [description]
       */
      deleteFile(index, file, formItem) {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '是否确认删除该文件？删除后不可恢复'
        }).then(() => {
          // on confirm
          this.$bridge.callHandler('cancelNavKeepView')
          formItem.splice(index, 1)
        }).catch(() => {
          // on cancel
          this.$bridge.callHandler('cancelNavKeepView')
        });
      },
      /**
       * 预览-附件
       * @param  {[type]} item [description]
       * @return {[type]}      [description]
       */
      previewFile(item) {
        this.$bridge.callHandler('showPreview', {
          url: `${this.$common.filePath}${item}`,
          fileName:  this.fileName(item, 'fullName') || item
        })
        window.open(`${this.$common.filePath}${item}?filename=${this.fileName(item, 'fullName')}`)
      },
      /**
       * 返回键
       * @return {[type]} [description]
       */
      onClickLeft() {
        this.$router.go(-1)
      },
      /**
       * 创建editor
       * @return {[type]} [description]
       */
      editors() {
        var E = require('wangeditor')
        this.editor = new E('#editor')
        // 自定义菜单配置
        this.editor.customConfig.menus = [
            'head',
            'bold',
            'italic',
            'underline'
        ]
        this.editor.customConfig.zIndex = 1
        this.editor.create()
        this.editor.txt.html("");
      },
      /**
       * 显示会议室信息
       * @return {[type]} [description]
       */
      showRoom() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}meeting.php`,
          data: {
            do: "meeting",
            oid: this.oid,
            time: this.$common.formatTime(this.orderDate,'Y-M-D')
          }
        }
        this.$axios(config).then(res => {
          //会议室信息
          let arr = this.$common.deepCopy(res.data.office_type)
          arr.facilities = arr.facilities.split(",")
          this.room = this.$common.deepCopy(arr)

          //已预约的数据
          let orderd = []
          orderd = this.$common.deepCopy(res.data.meeting)
          for (var i = 0; i < orderd.length; i++) {
            // 先取年
            orderd[i].year = ((orderd[i].startdate).split(" "))[0]
            orderd[i].startdate = this.$common.dateToTime(orderd[i].startdate)
            orderd[i].enddate = this.$common.dateToTime(orderd[i].enddate)
          }
          this.meetingData = this.$common.deepCopy(orderd)
          this.showDoc = true

          setTimeout(_ => {
            this.$bridge.registerHandler('fullScreenLeftClick',(data,response) => {
              this.showAll = false
              this.$bridge.callHandler('cancelFullScreen',{title:'会议室详情'})
              response('leftClick')
            })
            this.$bridge.registerHandler('fullScreenRightClick',(data,response) => {
              this.showAll = false
              this.$bridge.callHandler('cancelFullScreen',{title:'会议室详情'})
              this.showAttendance = true
              response('rightClick')
            })
          },500)
        }).catch(err => {
          
        })
      },
      /**
       * 日期显示框
       * @return {[type]} [description]
       */
      datePopup() {
        this.dateShow = true
      },
      /**
       * 日期确认按钮
       * @param  {[type]} e [description]
       * @return {[type]}   [description]
       */
      dateConfirm(e){
        //日期确认查询有没有会议室预定的记录
        let config = {
          method: "post",
          url: `${this.$common.basePath}meeting.php`,
          data: {
            do: "times",
            oid: this.oid,
            time: this.$common.formatTime(e,'Y-M-D')
          }
        }
        this.$axios(config).then(res => {
          let arr = []
          arr = this.$common.deepCopy(res.data)
          for (var i = 0; i < arr.length; i++) {
            arr[i].startdate = this.$common.dateToTime(arr[i].startdate)
            arr[i].enddate = this.$common.dateToTime(arr[i].enddate)
          }
          this.meetingData = this.$common.deepCopy(arr)
          // 再调用会议室是否可用方法
          this.getTimeUseable()
        }).catch(err => {
          console.log(err)
        })
        this.orderDate = e
        this.dateShow = false
      },
      /**
       * 日期取消按钮
       * @return {[type]} [description]
       */
      dateCancel() {
        this.currentDate = this.orderDate
        this.dateShow = false
      },
      /**
       * 时间弹出事件
       * @return {[type]} [description]
       */
      timePopup() {
        this.datePickerVisible = true
      },
      /**
       * 时间选择器
       * @return {[type]} [description]
       */
      timeChange(e) {
        this.startTime = e.start
        this.endTime = e.end
        let nowTime = new Date().getHours() + ':' + new Date().getMinutes()
        if(this.orderDate <= new Date() && this.$common.timeToSec(e.start) < this.$common.timeToSec(nowTime)){
          this.$toast('预约开始时间不能小于当前时间')
        }else if(this.$common.timeToSec(e.end) - this.$common.timeToSec(e.start) < 10*60){
          this.$toast('会议预约时间不能小于10分钟')
        }else {
          this.getTimeUseable()
        }
      },
      /**
       * 会议室是否可用的方法
       */
      getTimeUseable() {
        let meetId = ''//会议id
        if(this.type == 'edit') {
          meetId = this.oid
        }
        let config = {
          method: "post",
          url:`${this.$common.basePath}meeting.php`,
          data: {
            do: "meetingtime",
            a_time: this.$common.formatTime(this.orderDate, 'Y-M-D') + " " + this.startTime,
            o_time: this.$common.formatTime(this.orderDate, 'Y-M-D') + " " + this.endTime,
            oid: this.oid,
            id: meetId
          }
        }
        this.$axios(config).then(res => {
          // 1表示不能用 2表示可以用
          this.useable = res.data == 2?true:false
        }).catch(err => {
          this.$toast(err.msg)
        })
        this.showRoom()
      },
      /**
       * 类型选择显示
       * @return {[type]} [description]
       */
      goType() {
        let config = {
          method: "POST",
          url: `${this.$common.basePath}meeting.php`,
          data: {
            do: "meetingtype"
          }
        }
        this.$axios(config).then(res => {
          this.typeData = this.$common.deepCopy(res.data)
          this.$nextTick(_ => {
            this.showType = true
          })
        }).catch(err => {
          this.$toast(err.msg)
        })
      },
      /**
       * 类型选择
       * @param  {[type]} e [description]
       * @return {[type]}   [description]
       */
      radioChoose(e) {
        this.radioId = e
         this.typeData.forEach((item,index) => {
          if(this.radioId == item.oid){
            this.radioValue = item.oname
          }
        })
      },
      /**
       * 类型取消键
       * @return {[type]} [description]
       */
      typeBack() {
        this.radioId = ''
        this.radioValue = ''
        this.showType = false
      },
      /**
       * 树显示
       * @return {[type]} [description]
       */
      goTree(type) {
        //type 1:会议记录 ，2:会议审批
        if(type == 1){
          this.showRecord = true
        }else{
          this.showExamine = true
        }
      },
      /**
       * 树数据
       */
      treeList() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}meeting.php`,
          data:{
            do: "department"
          }
        }
        this.$axios(config).then(res => {
          let treeData = this.$common.deepCopy(res.data)
          for (var i = 0; i < treeData.length; i++) {
            treeData[i].text = treeData[i].name
            for (var j = 0; j < treeData[i].children.length; j++) {
              (treeData[i].children)[j].text = (treeData[i].children)[j].name;
              (treeData[i].children)[j].choosed = false
            }
          }
          this.items = this.$common.deepCopy(treeData)
          // console.log(this.items)
        }).catch(err => {
          console.log(err)
          this.$toast(err.msg)
        })
      },
      /**
       * 参会人员确认按钮
       * @return {[type]} [description]
       */
      confirmChose() {
        this.attendanceId = this.$refs.sideChoose.getChoosed()
        this.attendanceValue = this.$refs.sideChoose.getChoosedByName()
        
        //人员去重
        let res = new Map();
        this.attendanceValue = this.attendanceValue.filter((item,index,array) => {
          return !res.has(item.id) && res.set(item.id, 1)
        })
        console.log(this.attendanceValue)
        this.showAttendance = false
      },
      /**
       * 在线选人
       * @return {[type]} [description]
       */
      onlineChanged(e) {
        //人员去重
        let res = new Map();
        this.changeTemp = e.filter((item,index,array) => {
          return !res.has(item.id) && res.set(item.id, 1)
        })
      },
      /** 
       * 记录人员选择
       */
      singleConfirmChose() {
        let obj = this.$refs.choosePeople.confirmChose()
        console.log(obj)
        this.recordId = obj.id
        console.log(this.recordId)
        this.recorduser = obj.name
        this.showRecord = false
      },
      /**
       * 审批人员选择
       * @return {[type]} [description]
       */
      examineChoose() {
        let obj = this.$refs.choosePeople.confirmChose()
        this.staffId = obj.id,
        this.staffuser = obj.name
        this.showExamine = false
      },
      /** 
       * 添加参会人员
       */
      addAttendance() {
        console.log(this.attendanceId)
        this.showAttendance = true
      },
      
      /**
       * 查看所有人
       * @return {[type]} [description]
       */
      checkAll() {
        this.$bridge.callHandler('openFullScreen',{left:'返 回', title:'出席人员', right:'继续添加'})
        this.showAll = true
      },
      /**
       * 出席人员返回
       * @return {[type]} [description]
       */
      goBack() {
        this.showAll = false
      },
      /**
       * 继续添加按钮
       * @return {[type]} [description]
       */
      attentToAdd() {
        this.showAll = false
        this.showAttendance = true
      },
      /**
       * 删除参会人
       */
      deleteIcon(obj, index){
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '警告',
          message: '确认删除'+ obj.name +'吗？'
        }).then(() => {
          this.$bridge.callHandler('cancelNavKeepView')
          this.attendanceValue.splice(index,1)
          this.attendanceId.splice(index,1)
        }).catch(() => {
          // on cancel
          this.$bridge.callHandler('cancelNavKeepView')
        })
        /*let config = {
          method: "",
          url:"",
          data: ""
        }
        this.$axios(config).then(res => {

        }).catch(err => {
          this.$message.error(err.msg)
        })*/
      },
      /**
       * 预约按钮
       * @return {[type]} [description]
       */
      orderBtn() {
        let nowTime = new Date().getHours() + ':' + new Date().getMinutes()
        if(this.titleName.trim() == '') {
          this.$toast('请填写会议名称')
        }else if(this.attendanceValue.length <= 0) {
          this.$toast('请选择出席人员')
        }else if(this.$common.timeToSec(this.endTime) - this.$common.timeToSec(this.startTime) < 10*60){
          this.$toast('预约时间不能小于10分钟')
        }else if(this.orderDate <= new Date() && this.$common.timeToSec(this.startTime) < this.$common.timeToSec(nowTime)){
          this.$toast('预约开始时间不能小于当前时间')
        }else {
          if(this.type == 'edit'){
            this.editUpload()
          }else{
            this.$toast({
              duration: 0, // 持续展示 toast
              forbidClick: true,
              className: 'loading-toast',
              icon: require('../../assets/loading.gif'),
            })
            let attendanceName = this.$common.deepCopy(this.attendanceValue)
            attendanceName = attendanceName.map((item,index) => {
              return item.name
            })
            let start_time = this.$common.formatTime(this.orderDate,'Y-M-D') + " " + this.startTime
            let end_time = this.$common.formatTime(this.orderDate,'Y-M-D') + " " + this.endTime
            let config = {
              method:"post",
              url:   `${this.$common.basePath}meeting.php`,
              data:  {
                do: "meetingadd",
                title: this.titleName,
                subject: this.titleName,
                content: this.remark,

                appperson: this.$store.state.userId,//申请人
                uid: this.$store.state.userId,//发布人ID，同申请人一样

                otype: this.radioId, //类别
                recorduser: this.recordId,//记录人
                staffid: this.staffId, //审批人
                attendance: attendanceName, //申请人
                startdate: start_time,
                enddate: end_time,
                conferenceroom: this.oid,//会议室ID

                annex: this.attachment,
              }
            }
            this.$axios(config).then(res => {
              this.$toast.clear()
              this.orderForm.title = this.titleName
              this.orderForm.room = this.room.oname
              this.orderForm.time = this.$common.formatTime(this.orderDate,'Y-M-D') + " " + this.startTime + "-" + this.endTime
              this.orderForm.persons = attendanceName
              this.showOrderContainer = true
            }).catch(err => {
              this.$toast.clear()
              this.$toast.fail(err.msg)
            })
          }
        }
      },
      /**
       * 预约成功确认按钮
       * @return {[type]} [description]
       */
      orderBtnConfirm() {
        this.showOrderContainer = false
        this.$router.go(-1)
      },
      /**
       * 取消按钮
       * @return {[type]} [description]
       */
      cancelBtn() {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '确认取消本次会议吗？'
        }).then(() => {
          this.$bridge.callHandler('cancelNavKeepView')
          this.$toast({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          // on confirm
          let config = {
            method:"post",
            url:   `${this.$common.basePath}meeting.php`,
            data:  {
              do: "meetingudel",
              id: this.oid,
              user_id: this.$store.state.userId
            }
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.$toast({
              message:'取消成功',
              forbidClick: true,
              duration: 1000
            })
            setTimeout(_ => {
              this.$toast({
                duration: 1000,
                forbidClick: true,
                className: 'loading-toast',
                icon: require('../../assets/loading.gif'),
              })
            },1000)
            setTimeout(_ => {
              this.$router.go(-1)
            },2000)
          }).catch(err => {
            this.$toast.clear()
            this.$toast(err.msg)
          })
        }).catch(() => {
          // on cancel
          this.$bridge.callHandler('cancelNavKeepView')
        });
      },
      /**
       * 编辑显示数据
       * @return {[type]} [description]
       */
      editInfo() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}meeting.php`,
          data: {
            do: "meetingedit",
            id: this.oid
          }
        }
        this.$axios(config).then(res => {
          let edits = res.data
          this.titleName = edits.title
          //会议室
          this.room.oid = edits.conferenceroom.oid
          this.room.oname = edits.conferenceroom.oname
          this.room.number = edits.conferenceroom.number
          this.room.facilities = edits.conferenceroom.facilities.split(",")
          //类别
          this.radioValue = edits.otype.oname || ''
          this.radioId = edits.otype.oid || ''
          //记录
          this.recorduser = edits.recorduser.name || ''
          this.recordId = edits.recorduser.id || ''
          //审批
          this.staffuser = edits.staffid.name || ''
          this.staffId = edits.staffid.id || ''
          //出席人员
          this.attendanceValue = edits.attendance
          this.attendanceId = edits.attendance.map(item => {
            return item.id
          })
          //备注
          this.remark = edits.content
          this.showDoc = true
          // 附件
          this.attachment = edits.annex
          
          // 全屏下左按钮点击
          this.$bridge.registerHandler('fullScreenLeftClick',(data,response) => {
            this.showAll = false
            this.$bridge.callHandler('cancelFullScreen',{title:'会议室详情'})
          })
          this.$bridge.registerHandler('fullScreenRightClick',(data,response) => {
            this.showAll = false
            this.$bridge.callHandler('cancelFullScreen',{title:'会议室详情'})
            this.showAttendance = true
          })
        }).catch(err => {
          this.$toast(err.msg)
        })
      },
      /**
       * 编辑提交
       * @return {[type]} [description]
       */
      editUpload() {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '是否确认修改本次会议？'
        }).then(() => {
          this.$bridge.callHandler('cancelNavKeepView')
          this.$toast({
            duration: 0, // 持续展示 toast
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
          let attendanceName = this.$common.deepCopy(this.attendanceValue)
          attendanceName = attendanceName.map((item,index) => {
            return item.name
          })
          let start_time = this.$common.formatTime(this.orderDate,'Y-M-D') + " " + this.startTime
          let end_time = this.$common.formatTime(this.orderDate,'Y-M-D') + " " + this.endTime
          let config = {
            method:"post",
            url:   `${this.$common.basePath}meeting.php`,
            data:  {
              do: "meetingupload",
              id: this.oid,//会议id
              title: this.titleName,
              subject: this.titleName,
              content: this.remark,
              appperson: this.$store.state.userId,//申请人
              uid: this.$store.state.userId,//发布人ID，同申请人一样
              otype: this.radioId, //类别
              recorduser: this.recordId,//记录人
              staffid: this.staffId, //审批人
              attendance: attendanceName, //申请人
              startdate: start_time,
              enddate: end_time,
              conferenceroom: this.room.oid,//会议室ID
              annex: this.attachment
            }
          }
          this.$axios(config).then(res => {
            this.$toast.clear()
            this.$router.go(-1)
          }).catch(err => {
            this.$toast.clear()
            this.$toast(err.msg)
          })
        }).catch(() => {
          this.$bridge.callHandler('cancelNavKeepView')
        })
      },
      /**
       * 拨打电话
       * @return {[type]} [description]
       */
      phoneCall(phone) {
        this.$bridge.callHandler('makePhoneCall', { tel: phone })
      },
      /**
       * 用户名片
       * @param  {[type]} uid [description]
       * @return {[type]}     [description]
       */
      checkIdCard(uid) {
        this.$bridge.callHandler('showUserInfo',{userId: uid})
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  
  .container{
    background-color: #F5F5F5
  }
  .panel{
    background-image: url('../../assets/meeting/banner2.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    color: #fff;
  }
  .panel-mask{
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);
  }
  .panel-content{
    height: 100%;
    position: relative;
    top: -200px;
  }
  .circle-img{
    text-align: right;
  }
  .circle{
    width: 64px;
    height: 37px;
    z-index: -1;
  }
  .circle-font{
    position: absolute;
    top: 4%;
    right: 3%;
  }
  .circle-font-unuse{
    position: absolute;
    top: 2%;
    right: 1%;
  }
  .meet-title{
    padding-left: 20px;
    padding-top: 54px;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
  }
  .meet-people{
    padding-left: 20px;
    margin: 0 0 5px 0;
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .meet-facility{
    padding-left: 20px;
    font-size: 14px;
    margin: 0 0 5px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .little{
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: #fff;
  }
  .van-cell{
    line-height: 35px;
  }
  .van-cell__right-icon{
    height: 35px;
    line-height: 35px;
  }
  .cell-group{
    margin: 10px 0;
  }
  .tag-class{
    padding: 0 16px 10px 16px;
  }
  .van-tag{
    margin-right: 8px;
    margin-bottom: 8px;
  }
  .btn-class{
    padding: 5px 16px;
  }
  .full-container{
    height: 80vh;
  }
  .van-radio{
    margin: 20px 10px;
  }
  .van-sidebar-item--select{
    border-color: #2E79FF;
  }
  .van-tree-select__item--active{
    color: #2E79FF;
  }
  .label-right{
    font-size: 14px;
    color: #333333;
  }
  .more-btn{
    color: #2E79FF;
    font-size: 14px;
  }
  .add-btn{
    width: 45px;
    height: 45px;
    background-color: #F5F5F5;
    color: #979797;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
  }
  .tag-img{
    width: 45px;
    height: 45px;
    border-radius: 4px;
  }
  .tag-text{
    font-size: 14px;
    color: #333333;
    margin: -23px 0 0 0;
    text-align: center;
  }
  .delete-icon{
    position: relative;
    top: -22px;
    left: 58%;
    z-index: 3;
    background-color: #fff;
    border-radius: 50%;
  }
  .pop_delete-icon{
    position: relative;
    top: 13px;
    left: -10%;
    background-color: #fff;
    border-radius: 50%;
  }
  .mrgin-l-15{
    margin-left: 15px;
  }
  .order-img{
    width: auto;
    height: 128px; 
  }
  .order-title{
    color: #2E79FF;
    text-align: center;
  }
  .order-left{
    max-width: 100px;
  }
  .order-content{
    text-align: left;
  }
  .notify-text{
    margin: 15px;
    font-size: 17px;
    color: #333333;
    font-weight: bolder;
  }
  .unuse-info{
    padding: 11px 15px;
  }
  .head-img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
  .unuse-container{
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .unuse-name{
    font-size: 17px;
    color: #333333;
    font-weight: bold;
    margin: 0 10px;
  }
  .unuse-depart{
    font-size: 14px;
    color: #999999;
  }
  .unuse-time{
    margin: 10px 0;
    font-size: 17px;
    color: #333333;
  }
  .margin-l-10{
    margin-right: 10px;
  }
  .slot-time-panel{
    margin: 15px;
    max-height: 100px;
    overflow: hidden;
    overflow-y: scroll;
  }
  .ul-class{
    margin-left: 20px;
    margin-right: 15px;

    li{
      color:#F54B03;
      list-style: disc;
      margin-bottom: 10px;
    }
    span{
      color: #333333;
      font-size: 17px;
    }
  }

  
  .alls{
    // padding-top: 46px;

    .information{
      color: #999999;
      font-size: 14px;
      padding: 0 15px;
    }
  }
  .flex-base{
    display: flex;
    align-items: center;
  }
  .right-value{
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    a{
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
    }
  }
  .title-img{
    width: 45px;
    height: 45px;
  }
  .title-text{
    font-size: 17px;
    color: #333333;
  }
  .mrgin-r-15{
    margin-left: 15px;
  }
  .custom-class{
    width: 24px;
    height: 24px;
    margin-right: 20px;
  }
  .lefts{
    max-width: 90px;
  }
  .van-nav-bar__text{
    color: #333333;
  }
  .fixed{
    position: fixed;
    width: 100vw;
  }
  .padding-t-47{
    padding-top: 47px;
  }
  .bottom-btn {
    padding: 3px 10px;
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    width: calc(100vw - 20px)
  }
  .default-class {
    display: flex;
    align-items: center;
    color: #1989fa;
    margin: 10px 10px;
    font-size: 17px;
  }
  .info-class{
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #2E79FF;
    border-radius: 5px!important;
    background-color: #2E79FF;
    color: #fff;
  }
  .default-btn-class{
    border: none;
    color: #2E79FF;
    font-size: 17px;
  }
  .info-btn-class {
    font-size: 17px;
  }
  .row-btn {
    width: calc(100vw - 30px);
    background-color: #fff;
    padding: 5px 15px;
    position: fixed;
    bottom: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.14);
    z-index: 6;
  }
  .flex-btn {
    width: calc(100vw - 30px);
  }
  .span-calss {
    width: 43%;
  }
  .padding-b-60 {
    padding-bottom: 60px;
  }
  .order-success {
    h2 {
      margin: 15px 0;
    }
    .van-cell {
      padding: 5px 16px;
    }
    .van-cell:last-child {
      padding-bottom: 15px;
    }
  }
  // 附件样式开始
  .file-attachment-class{
    margin-top: 10px;
    background-color: #F5F5F5;

    .file-class {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 4px 0;

      p {
        margin: 0;
      }

      .van-icon-clear {
        margin: 8px;
      }
    }
    .img-class {
      width: 20px;
      height: 23px;
      margin-right: 10px;
    }
    .name-width {
      max-width: calc(100% - 70px);
      min-width: calc(100% - 70px);
    }
  }
  .color-grey {
    color: #969799;
  }
</style>
<style type="text/css" lang="less">
  #roomDetail {
    .van-nav-bar {
      position: fixed;
      width: 100vw;

      .van-nav-bar__text {
        color: #333333;
      }
    }
    .van-button {
      border-radius: 4px;
    }
    // 上传按钮样式开始
    .van-uploader__upload {
      width: 50px;
      height: 50px;
      background-color: #F5F5F5;
      border: 1px solid #F5F5F5;
    }
    .van-field__control--custom {
      display: block;
    }
  }
</style>